<template>
  <el-form size="small">
  <el-form-item>
    <el-radio v-model='radioValue' :label="1">
    日，允许的通配符[, - * ? / L W]
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="2">
    不指定
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="3">
    周期从
    <el-input-number v-model='cycle01' :min="1" :max="30" />
    -
    <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="31" />
    日
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="4">
    从
    <el-input-number v-model='average01' :min="1" :max="30" />
    号开始，每
    <el-input-number v-model='average02' :min="1" :max="31 - average01 || 1" />
    日执行一次
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="5">
    每月
    <el-input-number v-model='workday' :min="1" :max="31" />
    号最近的那个工作日
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="6">
    本月最后一天
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="7">
    指定
    <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
      <el-option v-for="item in 31" :key="item" :value="item">{{item}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  </el-form>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  name: 'crontab-day',
  props: ['check', 'cron'],
  setup(props, { emit }) {
  const radioValue = ref(1);
  const workday = ref(1);
  const cycle01 = ref(1);
  const cycle02 = ref(2);
  const average01 = ref(1);
  const average02 = ref(1);
  const checkboxList = ref([]);
  const checkNum = props.check;

  const cycleTotal = computed(() => {
    const start = checkNum(cycle01.value, 1, 30);
    const end = checkNum(cycle02.value, start ? start + 1 : 2, 31);
    return start + '-' + end;
  });

  const averageTotal = computed(() => {
    const start = checkNum(average01.value, 1, 30);
    const step = checkNum(average02.value, 1, 31 - start || 1);
    return start + '/' + step;
  });

  const workdayCheck = computed(() => {
    return checkNum(workday.value, 1, 31);
  });

  const checkboxString = computed(() => {
    const str = checkboxList.value.join();
    return str === '' ? '*' : str;
  });

  const radioChange = () => {
    if (radioValue.value !== 2 && props.cron.week !== '?') {
    emit('update', 'week', '?', 'day');
    }
    switch (radioValue.value) {
    case 1:
      emit('update', 'day', '*');
      break;
    case 2:
      emit('update', 'day', '?');
      break;
    case 3:
      emit('update', 'day', cycleTotal.value);
      break;
    case 4:
      emit('update', 'day', averageTotal.value);
      break;
    case 5:
      emit('update', 'day', workdayCheck.value + 'W');
      break;
    case 6:
      emit('update', 'day', 'L');
      break;
    case 7:
      emit('update', 'day', checkboxString.value);
      break;
    }
  };

  const cycleChange = () => {
    if (radioValue.value === '3') {
    emit('update', 'day', cycleTotal.value);
    }
  };

  const averageChange = () => {
    if (radioValue.value === '4') {
    emit('update', 'day', averageTotal.value);
    }
  };

  const workdayChange = () => {
    if (radioValue.value === '5') {
    emit('update', 'day', workdayCheck.value + 'W');
    }
  };

  const checkboxChange = () => {
    if (radioValue.value === '7') {
    emit('update', 'day', checkboxString.value);
    }
  };

  watch([radioValue, cycleTotal, averageTotal, workdayCheck, checkboxString], () => {
    radioChange();
  });

  return {
    radioValue,
    workday,
    cycle01,
    cycle02,
    average01,
    average02,
    checkboxList,
    checkNum,
    cycleTotal,
    averageTotal,
    workdayCheck,
    checkboxString,
    radioChange,
    cycleChange,
    averageChange,
    workdayChange,
    checkboxChange
  };
  }
}
</script>
